<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    {% load static %}
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <script type="text/javascript" src = "{% static 'js/regex.js' %}"></script>


    <title>问题生成-登录</title>
    <link rel="stylesheet" href="{% static 'css/reset.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/common.css' %}" />
    <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}" />

    <style>
        input:focus {
            border-style: solid;
            border-color: #00c9fe;
            box-shadow: 0 0 15px #00c9fe;
        }

        .sel {
            margin: 22px;
            padding: 10px;
        }

.footer{
    width: 100%;
    margin-top: 2px;
    /*height: 250px;*/
    overflow: hidden;
    /*background: url(../img/footer_bg.png);*/
}
.footer-bottom{
    width: 100%;
    height: 30px;
    background: #000000;

}
.footer-bottom ul{
    text-align: center;
}
.nav01 {
	height: 30px;
    text-align: center;
}
.nav01 ul {
    display: inline-block;
}
.nav01 li {
	margin: 0px 2px;
    color: rgb(255, 255, 255);
    line-height: 25px;
    font-size: 16px;
    font-family: "宋体";
    float: left;
    list-style: none;
}
.nav01 a {
    text-decoration: none;
    color: #ffffff;

}
.nav01 a:hover {
    background-color: #333333 ;
}
.newslist_height{
    font-size:17px;
    color:#000000;
    max-width:500px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

    </style>
</head>
<body>
<div class="wrap login_wrap">
    <div class="content" style="width:100%">


        <div class="logo" style="width:100%"></div>


        <div class="login_box "  style="padding-bottom:10px">
            <div class="login_form">
                {% block content %}
                <div class="login_title">
                    用户登录
                </div>

                    <form id="form" onsubmit="return false">
                        {% csrf_token %}
                        <div id="err_tips" style="display: none">
                        <span>用户名或密码错误</span>
                    </div>
                    <div class="form_text_ipt">
                        <input name="userid" id="userid" placeholder="用户账号" type="text" required="required"/>
                    </div>
                    <div class="ececk_warning"><span>用户账号</span></div>

                    <div class="form_text_ipt">
                        <input name="password" placeholder="用户密码" id = "password" type="password" required="required"/>
                    </div>
                    <div class="ececk_warning"><span>密码不能为空</span></div>
                    <div class="sel">
                        &nbsp;
                        <input type = "radio" name="person" value="student" checked="checked">学生</td>

                        <input type = "radio" name="person" value="teacher">教师</td>

                        <input type = "radio" name="person" value="manager" >管理员</td>
                        <a href="/service/register/" style="position: relative;left: 120px">注册</a>
                    </div>
                    <div class="form_reg_btn" >
                        <input  type="text"   name="code" required="required"/>
                        <img src="/service/showcode/" id="validate_code" onclick="change(this)">
                        <br/>
                    </div>
                    <div class="form_btn">
                        <button id="login" >登录</button>
                    </div>


                </form>
                <script>
                $('#login').click(function () {
                    let DATA = $("#form").serialize();
                    $.ajax({
                        type: 'POST',
                        url: '/service/operate_login/',
                        dataType: 'json',
                        data: DATA,
                        success: function (response) {
                            switch (response.status) {
                                case 200:{
                                    {#alert("欢迎！");#}
                                    window.location.href='/service/myhome/';
                                    break;
                                }
                                case 201:{
                                    {#alert("欢迎！");#}
                                    window.location.href='/service/myhome/';
                                    break;
                                }
                                case 202:{
                                    {#alert("欢迎！");#}
                                    window.location.href='/service/myhome/';
                                    break;
                                }
                                case 203:{
                                    var err_tips = document.getElementById('err_tips')
                                    err_tips.style.display="block";
                                    vali_code = document.getElementById('validate_code')
                                    change(vali_code);
                                    setTimeout(function(){err_tips.style.display="none";},3000);
                                    break;
                                }
                                case 100:{
                                    alert("密码错误，请重新输入");
                                    window.location.reload();
                                    break;
                                }
                                case 103:{
                                    alert("验证码错误，请重新输入");
                                    vali_code = document.getElementById('validate_code');
                                    change(vali_code);
                                    change(document.getElementsByTagName('img'));
                                    break;
                                }
                                default: {
                                    alert("请求错误");
                                    location.reload();
                                    break;
                                }
                            }
                        },
                        error : function() {
                                alert("异常！");
                            }
                    })
                })
                </script>
                {%endblock%}
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="{% static 'js/service.js' %}"></script>

</body>
</html>